// 设置post和album的type
type Post = {
    id: number,
    userId: number,
    title: string,
    body: string
}
type Album = {
    userId: number,
    id: number,
    title: string
}

// 分别获取Posts和Albums数据
const fetchPosts = async (userId: string) => {
    const res = await fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`);
    return res.json();
};
const fetchAlbums = async (userId: string) => {
    const res = await fetch(`https://jsonplaceholder.typicode.com/albums?userId=${userId}`);
    return res.json();
};

export default async function PostsParallel({ params }: { params: Promise<{ id: string }> }) {
    const { id } = await params;
    const postsData = fetchPosts(id);
    const albumsData = fetchAlbums(id);
    const [posts, albums] = await Promise.all([postsData, albumsData]);

    return (
        <div className="flex">
            <div>
                <h2>Posts</h2>
                <div>
                    {
                        posts.map((post: Post) => (
                            <div key={post.id} className="border p-4 mb-2">
                                <h3 className="text-lg font-bold">{post.title}</h3>
                                <p>{post.body}</p>
                            </div>
                        ))
                    }
                </div>
            </div>
            <div>
                <h2>Albums</h2>
                <div>
                    {
                        albums.map((album: Album) => (
                            <div key={album.id} className="border p-4 mb-2">
                                <h3 className="text-lg font-bold">{album.title}</h3>
                            </div>
                        ))
                    }
                </div>
            </div>
        </div>
    )
}
